<template>
	<el-dialog v-model="visible" :title="'编辑标签'" :close-on-click-modal="false">
		<el-transfer
			v-model="checkValue"
			filterable
			filter-placeholder="快速搜索"
			:right-default-checked="rightCheck"
			:titles="['全部标签', '已选标签']"
			:data="data"
		/>
		<template #footer>
			<el-button @click="visible = false">{{ '取 消' }}</el-button>
			<el-button type="primary" @click="dataFormSubmit()"> 确 定</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getLabelListAll } from '@/api/labels-mana/index'

const emit = defineEmits(['confirm'])

const props = defineProps({
	value: {
		type: Array,
		required: true
	}
})

const checkValue = ref([])
const visible = ref(false)
const rightCheck = ref([])

const init = () => {
	visible.value = true

	generateData()

	checkValue.value = props.value
	rightCheck.value = props.value
	console.log(rightCheck.value)
}

const generateData = async () => {
	data.value = []
	await getLabelListAll().then(res => {
		res.data.forEach(element => {
			data.value.push({
				label: element.bqmc,
				key: element.bqbh,
				initial: element.bqmc
			})
		})
	})
}

const data = ref()

const dataFormSubmit = () => {
	visible.value = false
	emit('confirm', checkValue.value)
}

defineExpose({
	init
})
</script>
